/* eslint-disable no-undef */
module.exports = {
  mode: "jit",
  corePlugins: {
    preflight: false,
  },
  // darkMode: 'class',
  plugins: [],
  purge: {
    //import.meta.env.PROD
    enable: process.env.NODE_ENV === "production",
    content: ["./index.html", "./src/**/*.{vue,ts,tsx}", "./static/clockIn/clockIn.html", "./static/**/*.{vue,ts,tsx}"],
  },
  theme: {
    extend: {
      zIndex: {
        "-1": "-1",
        1050: 1050,
      },
      colors: {
        "color-header": "#0F1C33",
        "color-main": "#172B4D",
        "color-secondary": "#7B879A",
        "color-disabled": "#B9C0CC",
        "color-active": "#4285F4",
        "color-border": "#E9EBEE",
        "color-split": "#F2F3F4",
        "color-success": "#2ECC74",
        "color-danger": "#F56662",
        "color-gray": "#E9EBEE",
      },
      backgroundColor: {
        normal: "#F3F5F7",
        header: "#F8F9FA",
      },
      spacing: {
        4.5: "1.125rem", //16px
        5.5: "1.375rem",
      },
      width: {
        34: "8.5rem",
        99: "24.75rem",
        108: "27rem",
        168: "42rem",
        220: "55rem",
        252: "63rem",
      },
      height: {
        17: "4.25rem",
        120: "30rem",
      },
      margin: {
        108: "27rem",
      },
      screens: {
        xxs: "370px",
        xs: "480px",
        sm: "576px",
        md: "768px",
        lg: "992px",
        xl: "1200px",
        xxl: "1600px",
        xxxl: "2000px",
      },
      minWidth: {
        "login-right": "663px",
        52: "13rem",
      },
      maxWidth: {
        284: "71rem",
        343: "85.75rem",
      },
      fontSize: {
        5.7: "1.425rem",
      },
      lineHeight: {
        6.3: "1.575rem",
      },
    },
  },
  variants: {
    extend: {
      paddingLeft: ["even"],
      paddingRight: ["odd"],
    },
  },
};
